<template>
  <div class="indexFive">
    <h2>
      <i class="iconfont icon-huo iconfont-min"></i><i class="iconfont icon-huo"></i> 劲爆特惠
      <i class="iconfont icon-huo"></i><i class="iconfont icon-huo iconfont-min"></i>
      <span
        class="more"
        v-if="popular.length > 3"
        @click="
          $router.push({
            path: '/giveAnEncore',
          })
        "
        >更多<van-icon name="arrow"
      /></span>
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <van-skeleton title :row="5" v-if="popular.length == 0" />
    <div class="good-list">
        <div class="good-item" v-for="value in popular"
        :key="value.F_ProductId">
      <div
        class="good-card"
        
        @click="
          $router.push({
            path: '/product',
            query: {
              id: value.F_ProductId,
              parents_id: username,
            },
          })
        "
      >
        <van-image
          class="product-img lazy-img"
          lazy-load
          :src="'http://higuang365.com/' + value.F_pic_url"
        />
        <div class="good-desc">
          <div class="county">
            <img
              class="county-icon"
              v-if="value.F_yuliu2"
              :src="'http://higuang365.com/' + value.F_yuliu2"
              alt=""
            />

            <div class="county-title">
              {{ value.F_BrandCountrie }}
            </div>
          </div>

          <div class="title">{{ value.F_Name }}</div>
          <span class="price"
            >¥ <span>{{ value.F_BdPrice }}</span></span
          >
          <span class="estimate" v-show="value.F_BdPrice != value.F_Price"
            >￥{{ value.F_Price }}</span
          >
          <span
            class="share"
            @click.stop="addGoodsCart(value.F_yuliu3, value.F_ProductId)"
          >
            <i class="iconfont icon-gouwuche1"></i>
          </span>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const data = reactive({
      popular: [],
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 6,
        tag_id: "39",
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        const res = await GetTagGoodsList({
          pageNum: 1,
          pageSize: 6,
          tag_id: "39",
          strlv: getCookie("MLV"),
        });
        data.popular = res[1];
        return;
      }
      data.popular = res[1];
    };
    onLoad();
    return { ...toRefs(data),  addGoodsCart };
  },
});
</script>
<style lang="scss" scoped>
.indexFive {
  h2 {
    font-size: 1.7rem;
    letter-spacing: 2px;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    i {
      color: red;
    }
    .icon-huo {
      font-size: 2rem;
    }
    .iconfont-min {
        font-size: 1.6rem;
    }


    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .good-item {
    width: 50%;
    box-sizing: border-box;
    animation: jello-horizontal 1s both;
    transition: all 1s;
  }
  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }
  .product-img {
    display: block;
    width: 100%;
    height: calc(50vw - 3rem);
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding: 1rem 1rem 0;
    position: relative;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 1.3rem;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      font-size: 1.3rem;
      // height: 3.2rem;
      line-height: 2rem;
      letter-spacing: 0.5px;
      margin-top: 2px;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      font-size: 1.3rem;
      color: #ff0036;
      font-weight: bold;
      line-height: 4rem;
      span {
        font-size: 1.7rem;
      }
    }
    .share {
      color: #3c8a58;
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 10;
      i {
        font-size: 2rem;
      }
    }
    .estimate {
      color: #c5c5c5;
      text-decoration: line-through;
      margin-left: 0.5rem;
    }
  }
}
</style>